<template>
<div class="cover">
    <div class="pop">
        <div>
            <div class="pop_header">
                <div class="pop_img">
                    <img v-bind:src="imgSrc" alt="物品">
                </div>
                <div class="pop_d">
                    <h1 class="pop_title">{{title}}</h1>
                    <p class="pop_desc">{{desc}}</p>
                </div>
                <button class="pop_close" v-on:click="pop_close">×</button>
            </div>
        </div>
        <p class="pop_content">{{content}}</p>
        <p class="pop_from">获得途径：抽奖或房卡兑换或比赛</p>
        <button class="pop_use" v-if="isUse" v-on:click="useClick"></button>
    </div>
</div>
</template>


<script>
import qs from "qs";
import axios from "axios";
export default {
  name: "BackpackPop",
  props: ["goodDesc"],
  data() {
    return {
      goods: this.goodDesc,
      imgSrc: this.goodDesc.src || "",
      title: this.goodDesc.title || "",
      desc: this.goodDesc.desc || "",
      content: this.goodDesc.content || "游戏多多，奖励多多奥，快叫上你的小伙伴一起游戏吧 Y(^_^)Y",
      isUse: this.goodDesc.isUse,
      items: this.goodDesc.items
    };
  },
  methods: {
    pop_close() {
      this.$emit("popClose", "pop");
    },
    useClick() {
      if (this.items.length > 0) {
        axios
          .post(
            "/api/mobile/usegoods",
            qs.stringify({
              count: 1,
              total: 0,
              exchangeid: this.goodDesc.exchange
            }),
            {
              headers: {
                "Content-Type":
                  "application/x-www-form-urlencoded; charset=UTF-8"
              }
            }
          )
          .then(() => {
            this.$emit("useGood", this.goods);
          })
          .catch(() => {});
      } else {
        this.$emit("useGood", this.goods);
      }
    }
  }
};
</script>


<style scoped>
.cover {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pop {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../template/images/diwen1.png") left bottom no-repeat;
  background-color: #f4f3d4;
  background-size: 50%;
  border-radius: 0.08rem;
  padding: 0.4rem;
  text-align: center;
}

.pop_d {
  border-bottom: 2px solid #b6b690;
}

.pop_title {
  color: #0068b7;
  font-size: 0.25rem;
  width: 1.3rem;
}

.pop_title,
.pop_desc {
  margin-bottom: 0.1rem;
  text-align: left;
}

.pop_content {
  border-bottom: 2px solid #b6b690;
  color: #333;
  font-size: 0.25rem;
  font-weight: 600;
  padding-bottom: 0.2rem;
  margin: 0.2rem 0;
  text-align: left;
}

.pop_desc {
  color: #c76901;
  width: 2rem;
}

.pop_from,
.pop_desc {
  font-size: 0.2rem;
  text-align: left;
}

.pop_from {
  color: #ea0466;
}

.pop_header {
  display: flex;
  position: relative;
}

.pop_img {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.4rem;
  margin-right: 0.2rem;
  width: 1.4rem;
}

.pop_img img {
  max-width: 1.2rem;
}

.pop_close {
  color: #aaa;
  font-size: 0.8rem;
  position: absolute;
  right: -0.2rem;
  margin-top: -0.25rem;
}

.pop_use {
  background: url("../template/images/shiyong1.png") no-repeat;
  background-size: 100% 100%;
  margin-top: 0.4rem;
  width: 1.2rem;
  height: 0.6rem;
}
</style>

